<template>
  <div class="user-container">
    <!-- 用户基本信息面板 -->
    <div class="user-card">
      <van-nav-bar :border="false">
  <template #right>
    <van-icon name="setting-o" size="24" color="#fff"/>
  </template>
</van-nav-bar>
      <!-- 用户头像、姓名 -->
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #icon>
          <img src="" alt="" class="avatar" />
        </template>
        <template #title>
          <span class="username">用户名</span>
        </template>
      </van-cell>
      <!-- 动态、关注、粉丝 -->
      <div class="user-data">
        <div class="user-data-item">
          <span>{{ (amount / 100).toFixed(2) }}</span>
          <span>余额</span>
        </div>
        <div class="user-data-item" @click="$router.push('/coupon')">
          <span>1</span>
          <span>优惠劵</span>
        </div>
        <div class="user-data-item" @click="$router.push('/orders/0')">
          <span>{{ orders }}</span>
          <span>购买数</span>
        </div>
        <div class="user-data-item">
          <span>0</span>
          <span>积分</span>
        </div>
      </div>
    </div>
    <!-- nav -->
    <van-grid :column-num="5">
      <van-grid-item icon="shop-o" text="未支付" to="/orders/1" />
      <van-grid-item icon="logistics" text="待发货" to="/orders/0" />
      <van-grid-item icon="goods-collect-o" text="待收货" to="/orders/2" />
      <van-grid-item icon="thumb-circle-o" text="待评论" to="/orders/3" />
      <van-grid-item icon="cart-o" text="已完成" to="/orders/4" />
    </van-grid>
    <!-- 操作面板 -->
    <van-cell-group class="action-card">
      <van-cell icon="location-o" title="地址管理" is-link to="/address" />
      <van-cell icon="balance-pay" title="我的钱包" is-link to="/recharge" />
      <van-cell icon="coupon-o" title="我的优惠" is-link to="/coupon" />
      <van-cell icon="send-gift-o" title="我的收藏" is-link to="/collection" />
      <van-cell icon="guide-o" title="我的足迹" is-link to="/tracks" />
      <van-cell icon="edit" title="修改密码" is-link />
    </van-cell-group>
    <van-button type="danger" block @click="doLogin">退出登录</van-button>
    <Tabbar />
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      amount: 0,
      orders: 0,
      userId: localStorage.getItem('userId')
    }
  },
  methods: {
    async loadData () {
      // 获取余额
      const { data: resAmt } = await this.$post(this.API.API_URL_CUSTOMER_Account, {
        userId: this.userId
      })
      this.amount = resAmt.amount
      // 购买数
      const { data: resOrd } = await this.$post(this.API.API_URL_ORDERS, {
        userId: this.userId
      })
      this.orders = resOrd.orderListData.length
    },
    // 退出登陆
    doLogin () {
      localStorage.removeItem('userId')
      this.$router.push('/login')
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style lang="less" scoped>
.user-container {
  .user-card {
    background-color: #ff0037;
    color: white;
    padding-top: 20px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    .van-cell {
      // background: #007bff;
      height: 100px;
      background: transparent;
      color: white;
      text-align: left;
      line-height: 60px;
      &::after {
        display: none;
      }
      .avatar {
        width: 60px;
        height: 60px;
        background-color: #fff;
        border-radius: 50%;
        margin-right: 10px;
      }
      .username {
        font-size: 14px;
        font-weight: bold;
      }
    }
    .van-nav-bar {
      background-color: transparent;
    }
  }
  .user-data {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    margin: 0 auto;
    padding: 10px 0;
    width: 90%;
    background: rgba(87, 85, 86, 0.9);
    border-radius: 5px;
    .user-data-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.33%;
    }
  }
  .van-grid {
    margin: 0 auto;
    width: 90%;
  }
  .action-card {
    margin: 0 auto;
    width: 90%;
    .van-cell {
      .van-cell__title {
        margin-left: 5px;
        text-align: left;
      }
    }
  }
  .van-button {
    margin: 0 auto;
    width: 90%;
  }
}
</style>
